<template>
  <van-pull-refresh v-model="tcrefreshing" success-text="刷新成功" @refresh="ontcRefresh">
    <van-list
      v-model="tcloading"
      :finished="tcfinished"
      finished-text="没有更多了"
      @load="ontcLoad"
      offset="10"
    >
      <div class="city-box">
        <div class="city-title">
          <van-cell
            icon="location-o"
            arrow-direction="down"
            :title="city"
            is-link
            @click="citylist = true"
            value="切换" />
        </div>
      </div>
      <van-empty
        v-show="tcempty"
        class="custom-image"
        image="https://img.yzcdn.cn/vant/custom-empty-image.png"
        description="目前还没有约拍的消息哦"
      />
      <van-skeleton v-show="tcskeleton" style="background-color: #ffffff" title avatar :row="5" v-for="(item,index) of 3" :key="index"/>
      <div class="ypbox-box">
        <div v-for="(item,index) of tclist" :key="index" class="box-msg" @click="gotoypisd(item)">
          <div class="msg-uinfo">
            <div class="ui-le">
              <img :src="item.user.uportrait" alt="">
              <div class="le-msg">
                <span>{{ item.user.username }}</span>
                <span>{{ item.newaddTime }}</span>
              </div>
            </div>
            <div class="ui-rg">
              <div class="rg-box">
                <i class="iconfont icon-dizhi"></i>
                <span>{{ item.apAdress.split(' ')[0] }}</span>
              </div>
            </div>
          </div>
          <div class="msg-text">
            <span>{{ item.aprequirement }}</span>
            <span>期望拍摄时间: {{ item.newypTime }}</span>
            <span>约{{ item.apType }}</span>
            <div class="msg-theme">
              <span>主题: </span>
              <span v-for="(theme,index) of item.aptheme" :key="index">{{ theme }}</span>
            </div>
          </div>
          <div class="msg-img">
            <div class="img_box" v-for='(imgs,index) in item.imgs' :key='index' v-show="index<2">
              <img :src="imgs" alt="" @click.stop="getImg(item.imgs,index)">
              <div class="img-flow" v-if="item.imgs.length>2">
                <span>+{{ item.imgs.length-1 }}</span>
              </div>
            </div>
          </div>
          <div class="msg-cz">
            <div class="cz-le">
              <div class="le-gzbox">
                <span>+ 关注</span>
              </div>
            </div>
            <div class="cz-rg">
              <div class="cz-box">
                <i class="iconfont icon-dianzan2"></i>
                <span>{{ item.thumbs.length }}</span>
              </div>
              <div class="cz-box">
                <i class="iconfont icon-pinglun3"></i>
                <span>{{ item.comments.length }}</span>
              </div>
              <div class="cz-box">
                <i class="iconfont icon-fenxiang"></i>
              </div>
            </div>
          </div>
        </div>
      </div>
    </van-list>
  </van-pull-refresh>
</template>

<script>
import { Toast } from 'vant';

export default {
  props: {
    active: {
      default: () => {
        return ''
      }
    },
  },
  name: 'comtc',
  data(){
    return{
      tclist: [],
      tcloading: false,
      tcfinished: false,
      tcrefreshing: false,
      tcempty: false,
      tcskeleton: false,
      tcpage: 1,
      maxtcpage: null,
    }
  },
  created() {

  },
  methods:{
    ontcRefresh(){
      this.tcempty = false
      this.tcskeleton = true
      this.tclist = []
      setTimeout(() => {
        this.tcpage = 1
        this.gettclist(this.city)
        this.tcrefreshing = false;
        this.tcfinished = false;
        this.tcskeleton = false
      }, 1000);
    },
    ontcLoad(){
      console.info("约拍加载")
      this.tcloading = true;
      if (this.tcpage > this.maxtcpage) {
        this.tcloading = false;
        this.tcfinished = true;
      }else {
        setTimeout(()=>{
          this.gettclist()
          this.tcloading = false;
        },1000)
      }
    },
    async gettclist(city){
      try {
        const res = await this.$axios({
          url: '/blog/appointlike',
          method: "post",
          data: {
            page: this.tcpage,
            city,
          }
        })
        const {
          success,
          msg,
          data,
          maxpage,
          length
        } = res.data
        if (success) {
          console.info(data)
          if(data.rows.length == 0 && this.tcpage == 1){
            this.tcempty = true
          }else {
            this.tcempty = false
          }
          data.rows.map(r => {
            const year = new Date(r.addTime).getFullYear();
            const mouth = `${new Date(r.addTime).getMonth()+1}`.padStart(2, 0);
            const day = `${new Date(r.addTime).getDate()}`.padStart(2, 0);
            const ypyear = new Date(r.apTime).getFullYear();
            const ypmouth = `${new Date(r.apTime).getMonth()+1}`.padStart(2, 0);
            const ypday = `${new Date(r.apTime).getDate()}`.padStart(2, 0);
            r.newaddTime = `${year}-${mouth}-${day}`
            r.newypTime = `${ypyear}-${ypmouth}-${ypday}`
            r.imgs = []
            r.aptheme = r.aptheme.split(',')
            r.pictures.map(url => {
              r.imgs.push(url.photourl)
            })
          })
          data.rows.forEach(r=>{
            this.tclist.push(r)
          })
          console.info('同城',data.rows)
          this.tcpage++;
          this.maxtcpage = maxpage
        } else {
          Toast.fail(msg)
        }
      } catch (e) {
        Toast.fail(e)
      }
    },
    async gotoypisd(item) {
      try {
        const res = await this.$axios({
          url: '/blog/appointupdate',
          method: "post",
          data: {
            appointmentid: item.appointmentid,
            browse: parseInt(item.browse) + 1,
          }
        })
        const {
          success,
          msg,
          data
        } = res.data
        if (success) {
          item.browse = parseInt(item.browse) + 1
          this.$router.push({
            name: "ypisd",
            params: {
              appointment: item,
              active: this.active,
            }
          })
        } else {
          Toast.fail(msg)
        }
      } catch (e) {
        Toast.fail(e)
      }
    },
  }
};
</script>

<style scoped lang="scss">
.ypbox-box {
  overflow-y: auto;
  background-color: #ffffff;
  .box-msg {
    width: vw(690);
    margin: vw(10) auto;
    margin-bottom: 0;
    border-bottom: vw(10) solid #f6f6f6;
    .msg-uinfo {
      width: 100%;
      height: vw(100);
      display: flex;

      .ui-le {
        width: vw(510);
        display: flex;
        align-items: center;

        img {
          width: vw(85);
          height: vw(85);
          border-radius: 50%;
          object-fit: cover;
        }

        .le-msg {
          padding-left: vw(30);
          display: flex;
          flex-direction: column;
          line-height: vw(40);

          span {
            font-size: vw(28);

            &:last-child {
              color: #d5d5d5;
              font-size: vw(24);
            }
          }

        }
      }

      .ui-rg {
        flex: 1;
        display: flex;
        justify-content: center;
        align-items: center;

        .rg-box {
          justify-content: center;
          display: flex;
          align-items: center;

          span {
            padding-left: vw(10);
            font-size: vw(25);
          }
        }
      }
    }

    .msg-text {
      display: flex;
      flex-direction: column;

      span {
        font-size: vw(28);
        color: #666666;

        &:first-child {
          font-size: vw(40);
          color: #000000;
        }
      }
    }

    .msg-img {
      display: flex;
      flex-wrap: wrap;
      justify-content: flex-start;
      padding-top: vw(10);

      .img_box {
        position: relative;

        img {
          width: vw(335);
          height: vw(500);
          object-fit: cover;
          &:first-child{
            margin-right: vw(10);
          }
        }

        .img-flow {
          position: absolute;
          width: vw(50);
          height: vw(50);
          bottom: vw(10);
          right: 0;
          background-color: #00000070;
          display: flex;
          align-items: center;
          justify-content: center;

          span {
            font-size: vw(30);
            color: #b3aaaa;
          }
        }
      }
    }

    .msg-cz {
      display: flex;

      .cz-le {
        display: flex;
        align-items: center;

        .le-gzbox {
          width: vw(120);
          height: vw(40);
          border: 1px solid lightsalmon;
          border-radius: vw(20);
          justify-content: center;
          display: flex;
          align-items: center;

          span {
            font-size: vw(20);
            color: lightsalmon;
          }
        }
      }

      .cz-rg {
        flex: 1;
        display: flex;
        justify-content: flex-end;

        .cz-box {
          padding: vw(15);
          display: flex;
          align-items: center;

          i {
            font-size: vw(40);
          }

          span {
            margin-left: vw(10);
            font-size: vw(30);
          }
        }
      }
    }
  }
}
.box-msg {
  width: vw(690);
  margin: vw(10) auto;

  .msg-img-box {
    img {
      width: 100%;
      height: vw(400);
      object-fit: cover;
    }
  }

  .msg-text {
    display: flex;
    flex-direction: column;
    font-size: vw(28);
    color: #666666;

    &>span {
      &:first-child {
        font-size: vw(40);
        color: #000000;
      }
    }

    .msg-theme {
      span {
        font-size: vw(28) !important;
        color: #666666 !important;
        padding-right: vw(10);
      }
    }
  }

  .msg-cz {
    display: flex;

    .cz-le {
      display: flex;
      align-items: center;

      span {
        font-size: vw(25);
        color: #d5d5d5;
      }
    }

    .cz-rg {
      flex: 1;
      display: flex;
      justify-content: flex-end;

      .cz-box {
        padding: vw(15);
        display: flex;
        align-items: center;

        i {
          font-size: vw(40);
        }

        span {
          margin-left: vw(10);
          font-size: vw(30);
        }
      }
    }
  }
}
</style>
